<template>
  <div id="body">
    <header><div id="main" ref="lineRef"></div></header>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import '../../../public/static/theme/macarons'
export default {
  data() {
    return {
      chartInstance: null,
      total: {}
    }
  },
  methods: {
    initChart() {
      this.chartInstance = echarts.init(this.$refs.lineRef, 'macarons')
      const option = {
        title: {
          text: '现存确诊Top10'
        },
        tooltip: {
          trigger: 'axis'
          //   formatter: '{b0}: {c0}<br />{b1}: {c1}'
        },
        toolbox: {
          feature: {
            // dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            // restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {},
        xAxis: {
          type: 'category'
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar',
            showBackground: false,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {
              color: '#63c2ff'
            }
            // itemStyle: {
            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     { offset: 0, color: '#83bff6' },
            //     { offset: 0.5, color: '#188df0' },
            //     { offset: 1, color: '#188df0' }
            //   ])
            // }
          }
        ]
      }
      this.chartInstance.setOption(option)
    },
    async getChartData() {
      const { data: res } = await this.$jsonp(
        'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5'
      )
      this.total = JSON.parse(res)
      let list = this.total.areaTree[0].children.map((item) => ({
        name: item.name,
        value: item.total.nowConfirm
      }))
      let endList = []
      for (let i = 0; i < list.length; i++) {
        if (list[i].value) {
          endList.push(list[i])
        }
      }
      let xAxisData = [],
        yAxisData = []
      for (let i = 0; i < 10; i++) {
        xAxisData.push(endList[i].name)
        yAxisData.push(endList[i].value)
      }
      const barOption = {
        xAxis: {
          data: xAxisData
        },
        series: [
          {
            data: yAxisData
          }
        ]
      }
      this.chartInstance.setOption(barOption)
      window.addEventListener('resize', () => {
        // 执行echarts自带的resize方法，即可做到让echarts图表自适应
        this.chartInstance.resize()
      })
    }
  },
  mounted() {
    this.initChart()
    this.getChartData()
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.myChart.resize()
    })
  }
}
</script>

<style lang="scss" scoped>
#body {
  height: 100%;
  margin-left: 10px;
  &::before {
    position: absolute;
    top: 0;
    content: '';
    left: -10px;
    height: 10px;
    width: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }
  &::after {
    position: absolute;
    top: 0;
    content: '';
    right: 10px;
    height: 10px;
    width: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
  }
  header {
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    #main {
      padding-right: 20px;
      padding-top: 10px;
      height: 100%;
      width: 100%;
      &::before {
        position: absolute;
        bottom: 30px;
        content: '';
        left: -10px;
        height: 10px;
        width: 10px;
        border-bottom: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
      }

      &::after {
        position: absolute;
        bottom: 30px;
        content: '';
        right: 10px;
        height: 10px;
        width: 10px;
        border-bottom: 2px solid #02a6b5;
        border-right: 2px solid #02a6b5;
      }
    }
  }
}
</style>
